<template>
  <a-row justify="center"  class="article">
    <a-col span="24" :md="{span : 22}" :xl="{span : 20}">
     <a-card size="small">
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane key="1" tab="公告">
           <a-table
               :showHeader="false"
               :pagination="pagination"
               :loading="announcementLoading"
               :columns="announcementsColumns"
               :data-source="announcements">
             <template #bodyCell="{ column, text ,record}">
               <template v-if="column.dataIndex === 'title'">
                 <a-tooltip placement="top">
                   <template #title>
                     {{text}}
                   </template>
                   <a @click="gotoAnnouncement(record)">{{ text }}</a>
                 </a-tooltip>
               </template>
             </template>
           </a-table>
         </a-tab-pane>
       </a-tabs>
     </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import {isExternal} from "@/utils/validate"
import router from "@/router";
import {getAnnouncementList} from "@/api/home";
onMounted(() => {
  initAnnouncements();
})

const pagination = reactive( {
  onChange: (page: number) => {
    pagination.current = page
    initAnnouncements();
  },
  current:1,
  pageSize:5,
  total:0
});


//公告
const gotoAnnouncement = (record) => {
//  console.log(record)
  if(record.url != ""){
    if(isExternal(record.url)){
      window.open(record.url, "_blank");
      return ;
    }
    router.push(record.url)
  }else {
    router.push('/noticeDetails/' + record.id)
  }
}
const announcementLoading = ref<boolean>(false)
let announcements = []
const announcementsColumns =  [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis:true,

  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis:true,
    width:200
  },
]
const initAnnouncements = async () => {
  announcementLoading.value = true;
  const res = (await getAnnouncementList({
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  })).data
  announcements = res.rows;
  pagination.total = res.total
  announcementLoading.value = false;
}



const isMobile = reactive({
  value: window.matchMedia('(max-width: 868px)').matches
});

// 监听窗口大小改变
window.addEventListener('resize', () => {
  isMobile.value = window.matchMedia('(max-width: 868px)').matches;
});


const activeKey = ref('1');

</script>


<style lang="scss" scoped>

</style>
